<template>
    <div class="text-extract-container">
        <!-- 显示三方平台名称和链接地址 -->
        <div class="platform-info">
            <div style="padding: 5px;">
                <span style="color: black; font-weight: 600;">标题: </span>
                <span style="color: black;">{{ props.urlInfo?.platformName }}</span>
            </div>
            <div style="padding: 5px; display: flex; align-items: center; justify-content: flex-start;">
                <span style="color: black; font-weight: 600;">链接: </span>
                <div style="overflow: hidden; flex: 1;">
                    <a style="color: blue; white-space: nowrap;" :href="props.urlInfo?.platformLink" target="_blank">{{
                        props.urlInfo?.platformLink }}</a>
                </div>
            </div>
        </div>
        <!-- 禁用状态的 Textarea 组件 -->
        <el-input type="textarea" :disabled="true" class="disabled-textarea" 
            placeholder="提取的文本内容将显示在这里" rows="10" v-model="textResult"/>
    </div>
    <CustomLoading :loading="isLoading" :texts="loadingTexts" :icon-size="40" />
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import CustomLoading from '../../common/CustomLoading.vue';
import axiosUtil from '../../../axios-util/axios-util';
import { ElMessage } from 'element-plus';
import utils from '../../../utils/utils';

const textResult = ref('');

const theme = utils.getTheme();
const isLoading = ref(false);
const loadingTexts = ref<string[]>([
    '正在处理您的请求...',
    '数据加载中...',
    '请耐心等待...',
    '系统正在处理...',
    '即将完成...'
]);

// 暴露组件状态给父组件使用
defineExpose({
    textResult,
    isLoading
});

const props = defineProps({
    urlInfo: {
        type: Object,
        default: () => ({
            platformName: '',
            platformLink: '',
        })
    }
})

async function extract() {
    let formData = {
        webUrl: props.urlInfo?.platformLink,
        prompt: '从从文中提取文案内容',
    }
    console.log('开始提取文本，URL:', props.urlInfo?.platformLink); // 调试信息
    textResult.value = '';
    isLoading.value = true;
    try {
        const response = await axiosUtil.post('api/aliyun_tongyi/bailian_duomo_tai/get_text_from_webpage', formData)
        console.log('API响应:', response.data); // 调试信息
        if (response.data.code === 1 && response.data.data) {
            textResult.value = '文案概要:\n' + response.data.data.data.content;
            if (response.data.data.data.tags && response.data.data.data.tags.length > 0) {
                textResult.value += '\n文案标签:\n' + response.data.data.data.tags.join(",");
            }
            if (response.data.data.data.comment && response.data.data.data.comment.length > 0) {
                textResult.value += '\n网友观点:\n' + response.data.data.data.comment.join("\n");
            }
            console.log('提取的文本结果:', textResult.value); // 调试信息
        } else {
            ElMessage.error(response.data.msg || '请求失败');
        }
    } catch (error) {
        console.log('提取文本失败:', error);
        ElMessage.error('请求失败');
    } finally {
        isLoading.value = false;
        console.log('提取完成，isLoading:', isLoading.value, 'textResult长度:', textResult.value.length); // 调试信息
    }
}

onMounted(() => {
    extract();
})

watch(() => props.urlInfo, (newVal, oldVal) => {
    if (newVal.platformLink !== oldVal.platformLink) {
        extract();
    }
}, {
    deep: true
})
</script>

<style scoped>
.text-extract-container {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.platform-info {
    margin-bottom: 15px;
}

.platform-info a {
    color: #409EFF;
    text-decoration: none;
    margin-left: 10px;
}

.disabled-textarea {
    width: 100%;
}

:deep(.el-textarea__inner) {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"') !important;
    background-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"') !important;
}

:deep(.el-textarea__inner::placeholder) {
    color: rgb(82, 79, 79) !important;
}
</style>
